<template>
	<view class="relative full-screen fs-14 text-color-regular" :style="pageStyle">
		<uni-nav-bar ref="navBar" fixed statusBar color="#F4F4F4" :border="showBorder" :backgroundColor="navbarBgColor"
			@clickLeft="goBack">
			<view class="flex center w-full fs-16"><text class="text-color-regular">{{title}}</text></view>
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<view class="flex-col w-full" :style="`height: calc(100vh - ${navBarHeight || 0}px);`">
			<view class="flex-1 h-0 overflow-auto">
				<slot></slot>
			</view>
			<view class="flex-shrink" :style="`padding-bottom:${safeAreaBottom}px;background:${footerBgColor};`">
				<slot name="footer"></slot>
			</view>
		</view>
	</view>
</template>

<script setup name="BasePage">
	import {
		computed,
		ref,
	} from 'vue'

	const props = defineProps({
		backgroundColor: {
			type: String
		},
		navbarBgColor: {
			type: String,
			default: 'transparent'
		},
		footerBgColor: {
			type: String,
			default: 'transparent'
		},
		showBorder: {
			type: Boolean,
			default: false
		},
		title: {
			type: String
		},
		customGoBackFn:{
			type:Function
		}
	})

	const pageStyle = computed(() => {
		const style = {}
		if (props.backgroundColor) {
			style.backgroundColor = props.backgroundColor
		}
		return style
	})

	const navBar = ref(null)

	const goBack = () => {
		if(props.customGoBackFn){
			props.customGoBackFn();
			return;
		}
		uni.navigateBack();
	}

	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})
</script>
